<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>少儿编程网站首页</title>
		<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"/>
		<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.bg-1{
				background-color: #f1f8ff;
			}
		</style>
	</head>
	<body>
			<div class="jumbotron bg-1">
				<div class="container">
					<div class="row">
						<div class="col-md-7">
							<h1 class="text-info">学习少儿编程储备未来职业技能</h1>
							<h2 class="text-info mb-4">让孩子抓住机会  挑战未来</h2>
							<a class="btn btn-warning text-white btn-lg" href="#" role="button">免费领取课程</a>
						</div>
						<div class="col-md-5">
							<img src="shixun/img/QQ20241024-235834.png" class="img-fluid"/>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-8" offset-md-2>
						<h3>
							例子：<small>在控制台输入5个整数后，按<kbd>Enter</kbd>键，输出其和。</small>
						</h3>
					</div>
				</div>
				<div class="row mt-2">
					<div class="col-md-6">
						<pre>
							import java.util.Scanner;
							public class SunTest{
								public static void main(String] args) {
								int sum=O;
								int i=1;
								int num=0;
								while(i<=5){
									Scanner sc=new Scanner (System.in);
									num=sc.nextInt () ;
									sum= sum+num;
									i++;
								}
								System.out.println("所得到的和为: "+sum);
							}
						}
						</pre>
					</div>
					<div class="col -md-6">
						<p>在控制台輸入: <kbd>10</kbd>+<kbd>Enter</kbd>、 <kbd>20</kbd>+<kbd>Enter</kbd>, <kbd>30</kbd>+<kbd>Enter</kbd> <kbd> 40</kbd>+<kbd>Enter</kbd><kbd>50</kbd> +<kbd>Enter</kbd></p>
						<p>程序输出结果为: <samp>所得到的和为: 150</samp></p>
						<figure class="p-4 border border-danger">
							<img src="shixun/img/QQ20241024-235834.png" class="img-fluid"/>
						</figure>
					</div>
				</div>
			</div>
			
			<div class="bg-1 p-3 mt-4">
				<div class="container p-3">
					<div class="row">
						<div class="col-md-5">
							<ul class="list-unsettled p-3">
								<li class="text-info"><img src="img/section7_3.png" class="img-fluid" style="width:35px;"/>
									<p class="h4 d-inline">动画剧情+独家闯关</p>
								</li>
								<li class="text-secondary"><img src="img/section7_3.png" class="img-fluid"style="width:35px;"/>
									<p class="h4 d-inline">全职老师+小班直播</p>
								</li>
								<li class="text-primary"><img src="img/section7_3.png" class="img-fluid"style="width:35px;"/>
									<p class="h4 d-inline">专业灵活的课程体系</p>
								</li>
							</ul>
						</div>
						<div class="col-md-7">
							<button class="btn btn-warning text-white position-relative mb-3"style="left:100px;">
								<span>开心一笑</span>
							</button>
							<blockquote class="blockquote">
								<p class="mb-0">八进制和十进制其实也差不多，如果你少了两根手指头的话。</p>
								<p class="mb-0 text-capitalize">Base eight is just like base ten really,if you're missing twofingers。</p>
								<footer class="blockquote-footer">出自<cite title="著作名">Tom Lehrer</cite></footer>
						</blockquote>
						</div>
					</div>
				</div>
			</div>

			<div class="container p-4">
				<div class="row">
					<div class="col-md-10 offset-md-1">
						<table class="table table-striped table-bordered table-hover text-center">
							<thead>
								<tr class="table-primary">
									<th>
										<h4>试听课程</h4>
									</th>
									<th>
										<h4>Stretch编程</h4>
									</th>
									<th>
										<h4>Python编程</h4>
									</th>
								</tr>
							</thead>
							<tbody>
								<tr class="table-success">
									<td>
										<h3>$0</h3>
									</td>
									<td>
										<h3>$99</h3>
									</td>
									<td>
										<h3>$999</h3>
									</td>
								</tr>
								<tr>
									<td>体验编程</td>
									<td>捕鱼达人</td>
									<td>Python基础语法</td>
								</tr>
								<tr>
									<td>成果展示</td>
									<td>愤怒的小鸟</td>
									<td>Python的数据结构</td>
								</tr>
								<tr>
									<td>自己动手</td>
									<td>成果追踪</td>
									<td>案例讲解</td>
								</tr>
								<tr>
									<td>-</td>
									<td>自己的作品</td>
									<td>-</td>
								</tr>
								<tr>
									<td><a href="#" class="btn btn-primary btn-block">购买</a></td>
									<td><a href="#" class="btn btn-primary btn-block">购买</a></td>
									<td><a href="#" class="btn btn-primary btn-block">购买</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div class="bg-1 p-2">
				<div class="container">
					<footer class="row">
						<div class="col-md-2 align-self-center">
							<img src="../work02/work02/icon1.png" class="img-fluid">
						</div>
						<div class="col-md-5 text-center align-self-center">
							<ul class="list-inline">
								<li class="list-inline-item"><a href="#">品质保证</a></li>
								<li class="list-inline-item"><a href="#">师资队伍</a></li>
								<li class="list-inline-item"><a href="#">学生作品</a></li>
								<li class="list-inline-item"><a href="#">帮助中心</a></li>
								<li class="list-inline-item"><a href="#">联系我们</a></li>
							</ul>
						</div>
						<div class="col-md-3 align-self-center">
							<address>
								<strong>武汉市江夏区藏龙大道***号</strong><br>
								湖北城市建设职业技术学院<br>
								软件技术专业<br>
								<abbr title="电话">P：</abbr>（123）456-****</address>
							</div>
						</footer>
					</div>
				</div>

	</body>
</html>